<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>瀑布流 - column</title>
    <link rel="stylesheet" href="assets/counter.css">
    <style>
        body {
            margin: 0;
        }
        .box {
            margin: 10px;
            column-count: 3;
            column-gap: 10px;
        }
        .item {
            margin-bottom: 10px;
        }
        .item img {
            width: 100%;
        }
    </style>
</head>
<!-- 
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/columns
    优点
        实现相对简单。
        图片自动填充不用考虑图片加载状态。
        顺序在一定程度上可以改变。
    缺点
        高度是固定的，很难做活。
        顺序虽然可以改变，但是仍然不灵活，不尽人意。
-->
<div class="box">
    <div class="item">
        <img src="./assets/1.jpg" alt="1" />
    </div>
    <div class="item">
        <img src="./assets/2.jpg" alt="2" />
    </div>
    <div class="item">
        <img src="./assets/3.jpg" alt="3" />
    </div>
    <div class="item">
        <img src="./assets/1.jpg" alt="1" />
    </div>
    <div class="item">
        <img src="./assets/2.jpg" alt="2" />
    </div>
    <div class="item">
        <img src="./assets/3.jpg" alt="3" />
    </div>
    <div class="item">
        <img src="./assets/1.jpg" alt="1" />
    </div>
    <div class="item">
        <img src="./assets/2.jpg" alt="2" />
    </div>
    <div class="item">
        <img src="./assets/3.jpg" alt="3" />
    </div>
    <div class="item">
        <img src="./assets/1.jpg" alt="1" />
    </div>
    <div class="item">
        <img src="./assets/2.jpg" alt="2" />
    </div>
    <div class="item">
        <img src="./assets/3.jpg" alt="3" />
    </div>
    <div class="item">
        <img src="./assets/1.jpg" alt="1" />
    </div>
    <div class="item">
        <img src="./assets/2.jpg" alt="2" />
    </div>
    <div class="item">
        <img src="./assets/3.jpg" alt="3" />
    </div>
    <div class="item">
        <img src="./assets/1.jpg" alt="1" />
    </div>
    <div class="item">
        <img src="./assets/2.jpg" alt="2" />
    </div>
    <div class="item">
        <img src="./assets/3.jpg" alt="3" />
    </div>
    <div class="item">
        <img src="./assets/1.jpg" alt="1" />
    </div>
    <div class="item">
        <img src="./assets/2.jpg" alt="2" />
    </div>
    <div class="item">
        <img src="./assets/3.jpg" alt="3" />
    </div>
    <div class="item">
        <img src="./assets/1.jpg" alt="1" />
    </div>
    <div class="item">
        <img src="./assets/2.jpg" alt="2" />
    </div>
    <div class="item">
        <img src="./assets/3.jpg" alt="3" />
    </div>
</div>
